<!-- author: lizq -->
<!-- date: 2022-06-23 16:35:19 -->
<!-- description: table-操作区 -->
<template>
    <div class="container-operate">
        <div class="left">
            <div v-if="showLeft">
                <el-button v-hasPermi="[`${power}:add`]" type="primary" icon="Plus" @click="operate('add')">新增</el-button>
                <el-button v-if="showRemove" v-hasPermi="[`${power}:remove`]" type="danger" :disabled="selectNum == 0"
                    icon="Delete" @click="operate('remove')">
                    删除
                </el-button>
                 <el-button v-if="showEdit" v-hasPermi="[`${power}:edit`]" type="success" :disabled="selectNum !=1"
                    icon="Edit" @click="operate('edit')">
                    修改
                </el-button>
                <el-button v-if="showSort" v-hasPermi="[`${power}:sort`]" type="primary" plain icon="Sort" title="排序"
                    @click="operate('sort')">排序</el-button>
                <el-button v-hasPermi="[`${power}:import`]" type="primary" icon="Download" plain
                    @click="operate('import')">导入</el-button>
                <el-button v-hasPermi="[`${power}:export`]" type="primary" icon="Upload" plain
                    @click="operate('export')">导出</el-button>
                <!-- 默认插槽 -->
                <slot></slot>
            </div>
        </div>
        <div v-if="!showLeft" class="leftSlot">
            <!-- 左侧自定义插槽 -->
            <slot></slot>
        </div>

        <div v-if="showRight" class="right">
            <div class="rightSlot">
                <!-- 右侧自定义插槽 -->
                <slot name="rightSlot"></slot>
            </div>
            <el-tooltip v-if="showSearch" effect="dark" content="隐藏搜索" placement="top">
                <el-button class="right-btn" icon="Search" @click="operate('showSearch')" />
            </el-tooltip>
            <el-tooltip v-if="showExpand" effect="dark" :content="openShow ? '收起列表' : '展开列表'" placement="top">
                <el-button class="right-btn open-btn" :icon="openShow ? 'DArrowLeft' : 'DArrowRight'"
                    @click="operate('open')" />
            </el-tooltip>
            <el-tooltip effect="dark" content="刷新" placement="top">
                <el-button class="right-btn" icon="Refresh" @click="operate('refresh')" />
            </el-tooltip>
            <el-tooltip effect="dark" content="列设置" placement="top">
                <el-button class="right-btn" icon="Filter" @click="configShow = true" />
            </el-tooltip>
        </div>
    </div>
    <!-- 列设置 -->
    <G-table-column v-model="configShow" :header-data="tableHeader"
        @update-column="(arr) => operate('column', arr)"></G-table-column>
    <!-- 已选择 ** 项 -->
    <div v-if="selectNum != 0" class="num">
        <div>已选择 {{ selectNum }} 项</div>
        <div>
            <el-button type="primary" link @click="operate('cancelSelect')">取消选择</el-button>
        </div>
    </div>
</template>

<script setup>
// 参数值                    权限值
//    add           新增          add
//    edit          编辑          edit
//    remove        删除          remove
//    sort          排序          sort
//    import        导入          import
//    export        导出          export
//    showSearch    隐藏搜索
//    open          展开/收起列表
//    refresh       刷新
//    column        列设置
//    cancelSelect  取消勾选

//补充提交代码

defineProps({
    selectNum: { type: Number, default: 0 },
    showExpand: { type: Boolean, default: false },
    showSort: { type: Boolean, default: false },
    showRight: { type: Boolean, default: true },
    showLeft: { type: Boolean, default: true },
    tableHeader: { type: Object, default: () => { } },
    showSearch: { type: Boolean, default: true },
    showEdit: { type: Boolean, default: true },
    showRemove: { type: Boolean, default: true },
    //按钮权限
    power: { type: String, default: "" },
    many: { type: Boolean, default: true }
});
const $emit = defineEmits(["callBackData"]);

const state = reactive({
    openShow: false,
    configShow: false
});
const { openShow, configShow } = toRefs(state);

//操作-回调
const operate = (val, obj = []) => {
    if (val == 'open') {
        //展开收起
        state.openShow = !state.openShow;
    }
    if (val == 'add') {
        operate('cancelSelect');
    }
    $emit("callBackData", val, obj);
};
</script>
<style lang="scss" scoped>
.container-operate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-bottom: 20px;
    margin-bottom: 10px;

    .right {
        display: flex;
        align-items: center;

        .rightSlot {
            margin-right: 20px;
        }

        .el-button+.el-button {
            margin-left: 0;
        }

        .right-btn {
            margin-right: 10px;
        }

        .open-btn {
            :deep(.el-icon) {
                transform: rotate(90deg);
            }
        }

        :deep(.filter-popover) {
            width: auto !important;

            .el-checkbox {
                display: block;
                margin-right: 0;
                margin-bottom: 15px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    .leftSlot {
        width: auto;
        height: 100%;
    }
}

.num {
    border: 1px solid #abdcff;
    background-color: #f0faff;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 8px 20px 8px 16px;
    display: flex;
    justify-content: space-between;
}
</style>
